<template>
  <div>
    <h1>imageCompression</h1>
    <h1>图片压缩</h1>
    <input type="file" @change="onFileChange" />
    <button @click="uploadFile">上传</button>
    <img :src="outImage" style="width:20%;">
    <!-- <img :src="outImage" style="width:20%;height:20%;"> -->

    <h2>图片清晰化</h2>
  </div>
</template>
<script>
export default {
  data() {
    return {
      outImage: ""
    }
  },
  created() {
    //file转blob
    // var imgFile = e.target.files[0];
    // var imgBlob = URL.createObjectURL(imgFile);
  },
  methods: {
    onFileChange(e) {
      //获取图片文件 
      var imgFile = e.target.files[0];
      console.log(imgFile);
      let res = this.compressImage(imgFile, 1, 1);
      console.log("res: ", res);

    },
    /**
     * 使用canvas进行压缩
     * 可以对图片的宽高和质量进行压缩
     * @param file 上传的图片
     * @param quality 压缩比，默认 0.2
     * @param imageSizeScale 图片长宽压缩比，默认 0.8
     * 
     */
    compressImage(file, quality = 0.2, imageSizeScale = 0.8) {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = e => {
        const image = new Image();
        image.src = e.target.result;
        image.onload = () => {
          const canvas = document.createElement('canvas');
          const ctx = canvas.getContext('2d');
          let width = image.width;
          let height = image.height;
          //调整图片的大小
          // const scale = width / height;
          // width = width * imageSizeScale;
          // height = width / scale;
          // console.log(width, height);
          // canvas.width = width;
          // canvas.height = height;
          width = width * imageSizeScale;
          height = height * imageSizeScale;
          canvas.width = width;
          canvas.height = height;
          /**
           * 注意：不要用一下方式，使用以下方式会变成裁剪
           * canvas.width = width * 0.5;
           * canvas.height = height * 0.5;
           */
          ctx.drawImage(image, 0, 0, width, height);
          const dataURL = canvas.toDataURL(file.type, quality);
          console.log("dataURL", dataURL);
          this.outImage = dataURL;
          // 图片压缩到2m以下，压缩图片时，一个通常的做法是将图片压缩至文件大小不超过2M。以下是实现图片压缩至2M以下的代码示例
          // while (dataURL.length / 1024 / 1024 > size) {
          //   quality -= 0.1;
          //   dataURL = canvas.toDataURL(file.type, quality);
          // }
          // return dataURL;
        };
      };
    },
    /**
     * 图片压缩不失真，quality大小为 0-1
     */
    compressImage2(file, quality) {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = e => {
            const image = new Image();
            image.src = e.target.result;
            image.onload = () => {
                const canvas = document.createElement('canvas');
                const ctx = canvas.getContext('2d');
                const width = image.width;
                const height = image.height;
                canvas.width = width;
                canvas.height = height;
                ctx.drawImage(image, 0, 0, width, height);
                const dataURL = canvas.toDataURL(file.type, quality);
                return dataURL;
            };
        };
    },
    /**
     * 有些情况下，我们进行图片压缩后会出现图片变得模糊、不清晰的情况。以下是对Vue图片压缩后看不清的解决方法：
     * 1、使用高质量的压缩算法，例如：JPEG
     * 2、调整压缩的质量参数
     * 3、将图片压缩至合适的大小
     * 图片压缩到200k以内
     * 在进行图片压缩时，有些情况下需要将图片压缩至200k以内。以下是实现图片压缩至200k以内的代码示例：
     */
     compressImage3(file) {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = e => {
            const image = new Image();
            image.src = e.target.result;
            image.onload = () => {
                let width = image.width;
                let height = image.height;
                const maxResolution = 1000;
                if (width > height) {
                    if (width > maxResolution) {
                        height *= maxResolution / width;
                        width = maxResolution;
                    }
                } else {
                    if (height > maxResolution) {
                        width *= maxResolution / height;
                        height = maxResolution;
                    }
                }
                const canvas = document.createElement('canvas');
                const ctx = canvas.getContext('2d');
                canvas.width = width;
                canvas.height = height;
                ctx.drawImage(image, 0, 0, width, height);
                const dataURL = canvas.toDataURL('image/jpeg', 0.8);
                return dataURL;
            };
        };
    },
    uploadFile() {

    },

  },
}
</script>
<style lang="scss" scoped>
</style>>